import {View, Text, Image, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './checkTab.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import chijingRight from '@/assets/image/index/renewalMember/chijingRight.png';
import chijingLeft from '@/assets/image/index/renewalMember/chijingLeft.png';
import lanjingRight from '@/assets/image/index/renewalMember/lanjingRight.png';
import lanjingLeft from '@/assets/image/index/renewalMember/lanjingLeft.png';
import lanjingLogo from '@/assets/image/index/renewalMember/lanjing-logo.png';
import chijingLogo from '@/assets/image/index/renewalMember/chijing-logo.png';
import api from 'api';
interface ComponentState {
  checkTab: number;
  checkProtocol: boolean;
  checkList: string;
}

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState & ComponentState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState & ComponentState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      checkTab: 0,
      checkList: '',
      checkProtocol: false,
    };
  }
  setCheckTab(e: number, checkList: string) {
    if (this.state.checkTab !== e) {
      this.setState({
        checkTab: e,
        checkList,
      });
      const lanjingFirst = this.props.main.lanjingList[0];
      const chijingFirst = this.props.main.chijingList[0];
      this.props.actions.action.commonChange(
        `main.selectCard`,
        checkList == 'lanjingList' ? lanjingFirst.cardId : chijingFirst.cardId,
      );
      const cardType = ['月卡', '季卡', '半年卡', '年卡', '连续包月'];

      this.props.actions.action.commonChange(
        'main.selectCardMoney',
        checkList == 'lanjingList' ? lanjingFirst.activityPrice : chijingFirst.activityPrice,
      );
      this.props.actions.action.commonChange(
        'main.selectCardText',
        checkList == 'lanjingList' ? cardType[lanjingFirst.cardType] : cardType[chijingFirst.cardType],
      );
    }
  }
  lanjingLeft() {
    return (
      <View
        onClick={() => this.setCheckTab(0, 'lanjingList')}
        className={`checkTab-left checkTabStrip-lanjing  ${this.state.checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-lanjing-text">
          <Image src={lanjingLogo} className="memberLogo" />
          蓝晶会员
        </View>
        <Image src={lanjingLeft} className="gropundImage" />
      </View>
    );
  }
  lanjingRight() {
    return (
      <View
        onClick={() => this.setCheckTab(1, 'lanjingList')}
        className={`checkTab-right checkTabStrip-lanjing ${this.state.checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-lanjing-text">
          <Image src={lanjingLogo} className="memberLogo" />
          蓝晶会员
        </View>
        <Image src={lanjingRight} className="gropundImage" />
      </View>
    );
  }
  chijingLeft() {
    return (
      <View
        onClick={() => this.setCheckTab(0, 'chijingList')}
        className={`checkTab-left checkTabStrip-chijing  ${this.state.checkTab == 0 ? 'checkTab-check' : ''}`}
      >
        <View className="checkTabStrip-chijing-text">
          <Image src={chijingLogo} className="memberLogo" />
          赤晶会员
        </View>
        <Image src={chijingLeft} className="gropundImage" />
      </View>
    );
  }
  chijingRight() {
    return (
      <View
        onClick={() => this.setCheckTab(1, 'chijingList')}
        className={`checkTab-right checkTabStrip-chijing ${this.state.checkTab == 1 ? 'checkTab-check' : ''} `}
      >
        <View className="checkTabStrip-chijing-text">
          <Image src={chijingLogo} className="memberLogo" />
          赤晶会员
        </View>
        <Image src={chijingRight} className="gropundImage" />
      </View>
    );
  }
  render() {
    let {
      actions: {action},
      main: {lanjingList, chijingList, selectCard, memberCardType, selectCardMoney, selectCardText},
    } = this.props;
    const cardType = ['月卡', '季卡', '半年卡', '年卡', '连续包月'];
    let list = [];
    list = ['chijing', 'shuangchong'].includes(memberCardType) ? chijingList : lanjingList;

    if (this.state.checkList in this.props.main) {
      list = this.props.main[this.state.checkList];
    }
    return (
      <View
        className="payCard"
        style={{position: 'relative', zIndex: 3, background: '#FFFFFF', paddingBottom: '36rpx'}}
      >
        <View className="checkTab">
          {['noMember', 'lanjing'].includes(memberCardType) ? this.lanjingLeft() : this.chijingLeft()}
          {['chijing', 'shuangchong'].includes(memberCardType) ? this.lanjingRight() : this.chijingRight()}
        </View>
        <View
          style={{
            height: '26px',
            zIndex: 2,
            marginTop: '-26px',
            background: '#fff',
          }}
        ></View>

        <View className="checkTabBody">
          <View className="checkTabBody-NoticeBar">
            <Image className="checkTabBody-NoticeBar-logo" src="" />
            <Text className="checkTabBody-NoticeBar-text">
              支付 {selectCardMoney} 元成为{selectCardText}会员，过期自动失效，可重复购买
            </Text>
          </View>
        </View>
        <View className="checkTabBody-members">
          {list.map((e) => (
            <View
              className={`checkTabBody-member ${selectCard == e.cardId ? 'checkTabBody-member-select' : ''}`}
              onClick={() => {
                this.props.actions.action.commonChange('main.selectCardMoney', e.activityPrice);
                this.props.actions.action.commonChange('main.selectCardText', cardType[e.cardType]);
                this.props.actions.action.commonChange('main.selectCard', e.cardId);
              }}
              key={e.cardId}
            >
              <View className="checkTabBody-member-body">
                <Text className="checkTabBody-member-title">{cardType[e.cardType]}</Text>
                <Text className="checkTabBody-member-money">
                  <Text
                    style={{
                      fontSize: '28rpx',
                      fontWeight: 400,
                      color: '#FF7400',
                    }}
                  >
                    ￥
                  </Text>
                  {e.activityPrice}
                </Text>
                <Text className="checkTabBody-member-delete">￥{e.price}</Text>
              </View>
            </View>
          ))}
        </View>

        <View
          className={`payBtn ${
            ['noMember', 'lanjing'].includes(memberCardType) ? 'payBtn-lanjing' : 'payBtn-chijing'
          } ${this.state.checkProtocol ? 'payBtn-click' : ''}`}
          onClick={() => {
            if (!this.state.checkProtocol) return;
            // 小程序内的支付
            Taro.login({
              async success(res: {code: any | PromiseLike<string>; errMsg: string}) {
                if (res.code) {
                  let openid;
                  try {
                    openid = await api.payController.getLittleProgramOpenId(res.code);
                  } catch (e) {
                    Taro.showToast({
                      title: '功能不可用',
                      icon: 'none',
                      duration: 2000,
                    });
                    return;
                  }
                  await action.goToWeixinPay(openid);
                } else {
                  console.log('PayList_获取code失败！' + res.errMsg);
                }
              },
            });
          }}
        >
          同意协议并立即{selectCardMoney ? `支付${selectCardMoney}元` : ''}续费
        </View>
        <View
          style={{flexDirection: 'row', width: '85vw', margin: '0 auto'}}
          onClick={() => {
            this.setState({
              checkProtocol: !this.state.checkProtocol,
            });
          }}
        >
          <Radio checked={this.state.checkProtocol} color="#2793FA" style={{transform: 'scale(0.65)'}}></Radio>
          <View className="protocolBoxText">
            请仔细阅读
            <Text
              className="protocolText"
              onClick={(e) => {
                e.stopPropagation();
                Taro.navigateTo({
                  url: '/pages/package-A/protocol/renewMember/index',
                });
              }}
            >
              《续费协议》
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
